<template>
  <div class="container">
      <audio :src="songURL" ref="audio" @loadedmetadata="hasDownLoad"> </audio>
      <div class="song-info">
          <!--disc 已经是relative 所以再包一层-->
          <!--唱片图-->
          <div  style="z-index: 99999;width: 150px;height: 150px; float: right;position: absolute; right: 20%">
              <img style="width: 150px;height: 150px ; "
                     src="../../assets/img/needle-ip6.png" alt=""></div>
          <div class="disc roll paused"  @click="isPlay" ref="disc">
              <div class="song-pic">
                  <img :src="songIMG" alt="">
              </div>
          </div>
          <div style="position:absolute;top:50%;width:100%;height:50%">
              <div class="lyric">
                  <h2 v-cloak>{{songTitle}}</h2>
                  <p v-cloak>{{lyricTxt}}</p>
              </div>
              <!-- 进度条 -->
              <div class="range">
                  <input ref="range" class="custom-range" id="customRange" v-on:input="changeState" type="range" value="0">
              </div>
          </div>
      </div>
      <div class="mask"></div>
      <div class="bg">
          <img :src="songIMG" alt="">
      </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Lyric from 'lyric-parser'
export default {
    name:"playMusic",
    data () {
      return {
          songIMG:'',
          songURL:'',
          songTitle:'',
          lyricTxt:"",
          hasMetadata:false
      }
    },

    created(){
        // console.log(this.$store.state.ID)
        // console.log(this.ID);
        this.axios.all([this.getMusicURL(),this.getLyric(),this.getSongInfo()])
            .then(this.axios.spread((musicUrlData,lyricData,songInfoData)=>{
                // console.log(musicUrlData,lyricData,songInfoData);
                // console.log(this);
                this.songIMG=songInfoData.data.songs[0].al.picUrl
                this.songURL=musicUrlData.data.data[0].url
                this.songTitle=songInfoData.data.songs[0].name

                // 初始化lyric-parser  lyricStr 歌词 handle回调函数
                this.lyric = new Lyric(lyricData.data.lrc.lyric, this.handler)
            }))
    },
    methods: {
        getMusicURL(){
            return this.axios.get('http://localhost:3000/song/url?id='+this.ID)
        },
        //lyric 歌词
        getLyric(){
            return this.axios.get('http://localhost:3000/lyric?id='+this.ID)
        },
        //获取歌曲详情
        getSongInfo(){
            return this.axios.get('http://localhost:3000/song/detail?ids='+this.ID)
        },
        hasDownLoad(){
            this.hasMetadata=true;
        },
        pause(){
            // 播放状态，需要暂停
            this.$refs.audio.pause();
            this.$refs.disc.classList.remove('running');
            this.$refs.disc.classList.add('paused');
            this.lyric.togglePlay();
        },
        play(){
            if(this.hasMetadata===false)return
            this.$refs.audio.play();
            this.$refs.disc.classList.remove('paused');
            this.$refs.disc.classList.add('running');
            this.lyric.togglePlay();
        },
        //快进方法
        forward(){
            if(this.hasMetadata===false)return
            this.$refs.audio.ontimeupdate=()=> {
                this.$refs.range.value=100 * this.$refs.audio.currentTime/ this.$refs.audio.duration
            }
        },
        isPlay(){
            //onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
           // this.$refs.audio.onloadedmetadata=function () {

               if(this.$refs.audio.paused)
               {
                   //暂停状态，开始播放
                    this.play();
                   //进度条要移动
                   this.forward()

               }
               else
               {
                    this.pause();
               }
           // }
        },
        changeState(){
            if(this.hasMetadata===false)return
            this.$refs.audio.currentTime = this.$refs.range.value * this.$refs.audio.duration / 100
            this.play();//无法执行
            this.lyric.seek( this.$refs.audio.currentTime*1000 )
            // // 改变颜色
            // console.log(this.$refs.range);
            this.$refs.range.style.background=`linear-gradient(to right, red 0%,  #ccc ${this.$refs.range.value}%)`
        },

        handler({lineNum,txt}){
            // Lyric的回调函数
                this.lyricTxt =txt
        }
    },
    computed:{
        ...mapState(['ID'])
    },

    components: {},
}
</script>

<style scoped>

    [v-cloak] {
        display: none;
    }
    .song-info{
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: 100%;
    }
    .disc{
        width: 70%;
         padding-bottom: 70%;
        background:url("../../assets/img/disc-ip6.png") ;
        background-size: cover;
        border-radius: 50%;
        margin: auto;
        position: relative;
        top: 5%;
    }
    .song-pic{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 65%;
        height: 65%;
        /*background: red;*/
        border-radius: 50%;
        overflow: hidden;
    }
    .song-pic img{
        width: 100%;
        height: 100%;
    }
    .container{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: cornflowerblue;
    }

    .lyric>h2{
        font-weight: normal;
        color:white ;
        font-size: 15px;
        text-align: center;
        padding: 15px 0;
    }
    .lyric>p{
        font-weight: normal;
       width: 70%;
        margin: auto;
        line-height: 24px;
        font-size: 13px;
        color: white;
        text-align: center;
    }
    .range>input{
        width: 100%;
    }
    .mask{
        width: 100%;
        height: 100%;
        background-color:rgba(	255,182,193,0.5) ;
        position: absolute;
        z-index: 995;
    }
    .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 990;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bg img{
        height:50%;
        filter: blur(10px);
    }

    @keyframes roll {
        from{transform: rotate(0deg);}
        to{transform: rotate(360deg)}
    }
    .roll{
        animation: roll 20s linear infinite;
    }
   .running{
        animation-play-state: running;
    }
    .paused{
        animation-play-state: paused;
    }

    /* range样式 */
    .custom-range {
        width: 100%;
        height: 1.4rem;
        padding: 0;
        background-color: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .custom-range:focus {
        outline: none;
    }

    .custom-range:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .custom-range:focus::-moz-range-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .custom-range:focus::-ms-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .custom-range::-moz-focus-outer {
        border: 0;
    }

    .custom-range::-webkit-slider-thumb {
        width: 1rem;
        height: 1rem;
        margin-top: -0.31rem;
        background-color: #1e8ccc;
        border: 0;
        border-radius: 1rem;
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -webkit-appearance: none;
        appearance: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .custom-range::-webkit-slider-thumb {
            -webkit-transition: none;
            transition: none;
        }
    }

    .custom-range::-webkit-slider-thumb:active {
        background-color: #b3d7ff;
    }

    .custom-range::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.3rem;
        color: transparent;
        cursor: pointer;
        background-color: #c0ddff;
        border-color: transparent;
        border-radius: 1rem;
    }

    .custom-range::-moz-range-thumb {
        width: 1rem;
        height: 1rem;
        background-color: #007bff;
        border: 0;
        border-radius: 1rem;
        -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -moz-appearance: none;
        appearance: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .custom-range::-moz-range-thumb {
            -moz-transition: none;
            transition: none;
        }
    }

    .custom-range::-moz-range-thumb:active {
        background-color: #b3d7ff;
    }

    .custom-range::-moz-range-track {
        width: 100%;
        height: 0.5rem;
        color: transparent;
        cursor: pointer;
        background-color: #dee2e6;
        border-color: transparent;
        border-radius: 1rem;
    }

    .custom-range::-ms-thumb {
        width: 1rem;
        height: 1rem;
        margin-top: 0;
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        background-color: #007bff;
        border: 0;
        border-radius: 1rem;
        -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        appearance: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .custom-range::-ms-thumb {
            -ms-transition: none;
            transition: none;
        }
    }

    .custom-range::-ms-thumb:active {
        background-color: #b3d7ff;
    }

    .custom-range::-ms-track {
        width: 100%;
        height: 0.5rem;
        color: transparent;
        cursor: pointer;
        background-color: transparent;
        border-color: transparent;
        border-width: 0.5rem;
    }

    .custom-range::-ms-fill-lower {
        background-color: #dee2e6;
        border-radius: 1rem;
    }

    .custom-range::-ms-fill-upper {
        margin-right: 15px;
        background-color: #dee2e6;
        border-radius: 1rem;
    }

    .custom-range:disabled::-webkit-slider-thumb {
        background-color: #adb5bd;
    }

    .custom-range:disabled::-webkit-slider-runnable-track {
        cursor: default;
    }

    .custom-range:disabled::-moz-range-thumb {
        background-color: #adb5bd;
    }

    .custom-range:disabled::-moz-range-track {
        cursor: default;
    }

    .custom-range:disabled::-ms-thumb {
        background-color: #adb5bd;
    }

    /* range结束 */
</style>